// src/APP.vue

<template>
  <div>3、v-for中使用</div>
  <div v-for="(item, i) in list" :ref="setItemRef">
    {{ item }}
  </div>
</template>

<script lang="ts">
import { onBeforeUpdate, reactive, ref } from 'vue'

export default {
  name: 'APP',
  setup() {
    //3、v-for中使用
    const list = reactive([1, 2, 3])
    const itemRefs = ref([])
    const setItemRef = (el) => {  //使用函数引用执行自定义处理
      if (el) {
        itemRefs.value.push(el)
        console.log(itemRefs.value)
      }
    }
    // 确保在每次更新之前重置ref
    onBeforeUpdate(() => {
      itemRefs.value = []
    })

    return {
      list,
      setItemRef
    }

  }
}
</script>